<template>
    <div class="page">
        <el-tabs v-model="activeName">
            <el-tab-pane label="网站设置" name="1">
                <el-form :model="paramsModel"  class="demo-paramsModel" label-width="150px" ref="paramsForm">
                    <el-form-item label="网站名称" prop="webName" verify empty-message="请输入网站名称">
                        <el-input placeholder="如：新浪网，企业网站可输入公司名称" v-model="paramsModel.webName"></el-input>
                    </el-form-item>
                    <el-form-item label="首页标题" prop="webTitle" verify empty-message="请输入首页标题，建议关键字+网站名称或公司名称">
                        <el-input v-model="paramsModel.webTitle" placeholder="首页标题显示在搜索引擎中，可设置关键字有引流量的作用，也可设置网站口号等信息"></el-input>
                    </el-form-item>
                    <el-form-item label="网站关键词" prop="webKeywords">
                        <el-input v-model="paramsModel.webKeywords" placeholder="多个关键词用英文逗号隔开"></el-input>
                    </el-form-item>
                    <el-form-item label="网站描述" prop="webDesc">
                        <el-input :rows="3" type="textarea" v-model="paramsModel.webDesc" placeholder="网站描述显示在搜索引擎中，用于介绍网站内容，起到吸引流量的左右"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input placeholder="" v-model="paramsModel.contractTel"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱">
                        <el-input placeholder="" v-model="paramsModel.contactEmail"></el-input>
                    </el-form-item>
                    <el-form-item label="联系地址">
                        <el-input placeholder="" v-model="paramsModel.contactAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="底部联系信息">
                        <el-input :rows="5" placeholder="如版权申明、联系信息等，还可以投放HTML代码，如网站统计等" type="textarea" v-model="paramsModel.webFooter"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="submitParams" type="primary">保存网站设置</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="销售设置" name="2">
                <el-form :model="saleSettingModel" ref="saleSettingForm" label-width="120px" label-position="right">
                    <el-row>
                        <el-alert
                                show-icon
                                title="所有的产品价格以澳币为基础定价，人民币价格是 澳币x人民币汇率"
                                type="warning">
                        </el-alert>
                    </el-row>
                    <el-form-item label="汇率" prop="exchangeRate" verify empty-message="请输入汇率" :gt="0" :maxDecimalLength="2" error-message="汇率只能是大于0的数字，可精确到2位小数">
                        <el-input v-model="saleSettingModel.exchangeRate"></el-input>
                    </el-form-item>
                    <el-form-item label="包裹耗材重量" prop="packConsumablesWeight">
                        <el-input v-model="saleSettingModel.packConsumablesWeight"></el-input>
                    </el-form-item>
                    <el-form-item label="包裹首重" prop="packBaseWeight">
                        <el-input v-model="saleSettingModel.packBaseWeight"></el-input>
                    </el-form-item>
                    <el-form-item label="手续费" prop="serviceAmountRate">
                        <el-input v-model="saleSettingModel.serviceAmountRate"></el-input>
                    </el-form-item>
                    <el-form-item label="标记拍照服务费" prop="parcelTakePhotoPrice">
                        <el-input v-model="saleSettingModel.parcelTakePhotoPrice"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="submitSaleSetting" type="primary">保存销售配置信息</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="收款银行设置" name="3">
                <el-form :model="bankModel" ref="bankForm" label-width="80px" label-position="left">
                    <el-form-item label="银行名称" prop="bank" verify empty-message="请输入银行名称">
                        <el-input v-model="bankModel.bank" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="BSB" prop="bsb" verify empty-message="请输入BSB">
                        <el-input v-model="bankModel.bsb" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="账户名称" prop="name" verify empty-message="请输入账户名称">
                        <el-input v-model="bankModel.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="账号" prop="cardNo" verify empty-message="请输入账号">
                        <el-input v-model="bankModel.cardNo" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="bankModel.remark" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="submitBank" type="primary">保存收款银行信息</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    let pagerHeader = {
        title: '系统设置',
        desc: '在此设置网站信息、汇率等',
        breadcrumb: ['系统', '系统设置']
    }
    export default {
        name: 'settings',
        data () {
            return {
                activeName: '1',

                paramsModel: {
                    webName:null,
                    webTitle: null,
                    webKeywords: null,
                    webDesc: null,
                    contractTel:null,
                    contactAddress: null,
                    contactEmail: null,
                    webFooter:null,
                },
                saleSettingModel:{
                    "exchangeRate": null,
                    "packConsumablesWeight": 0, // 包裹耗材重量
                    "packBaseWeight": 0, // 包裹首重
                    "serviceAmountRate": 0, // 手续费
                    "parcelTakePhotoPrice": 0, // 标记拍照服务费
                },
                bankModel: {
                    "bank": "",
                    "name": "",
                    "bsb": "",
                    "cardNo": "",
                    "remark": ""
                },
            }
        },
        activated () {
            this.init()
        },
        created () {
            this.init()
        },
        methods: {
            init () {
                this.setPageHead(pagerHeader);
                /*
                this.$apis.settings.getSiteParams().then(r=>{
                    if(r.success){
                        this.bankModel = ....;
                        this.paramsModel = .....;
                        this.saleSettingModel = .....;
                    }
                })
                */
            },
            submitParams() {
                this.$refs.paramsForm.validate((valid) => {
                    if (valid) {
                        // 提交数据
                    }
                })
            },
            submitBank() {
                this.$refs.bankForm.validate((valid) => {
                    if (valid) {
                        // 提交数据
                    }
                })
            },
            submitSaleSetting() {
                this.$refs.saleSettingForm.validate((valid) => {
                    if (valid) {
                        // 提交数据
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
